<template>
	<!-- h5端 -->
	<!-- #ifndef APP-PLUS -->
	<web-view style="width: 100%;height: 100%;" :src="Mapview.webUrl.value"></web-view>
	<!-- #endif -->

	<!-- app端 -->
	<!-- #ifdef APP-PLUS -->
	<web-view :fullscreen="false" :src="Mapview.webUrl.value"></web-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		onMounted,
		getCurrentInstance,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	onLoad(() => {
		// #ifndef APP-PLUS
		getStationData(113.335184, 23.126187); //h5无法使用uni定位所以传入固定的坐标
		// #endif

		// #ifdef APP-PLUS
		uni.getLocation({
			type: 'gcj02', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
			success: res => {
				// console.log('手机定位返回', res);
				getStationData(res.longitude, res.latitude); //调用uni API获取定位
			},
			fail: err => {
				// 获取失败，err为错误信息
				console.log('getLocation err:', err);
			}
		});
		// #endif
	})

	//地图地址
	let Mapview = {
		webUrl: ref(`/static/html/gMap.html`),
	}

	//传入maker的数据 需要动态获取这里演示所以写死
	let getStationData = (lng, lat) => {
		const stationMarkersData = [{
				longitude: 113.339688,
				latitude: 23.16154
			},
			{
				longitude: 113.196217,
				latitude: 23.070792
			},
			{
				longitude: 113.327379,
				latitude: 23.145002
			},
			{
				longitude: 113.264431,
				latitude: 23.056863,
			},
			{
				longitude: 113.385708,
				latitude: 23.171367
			},
		];
		stationMarkersData.forEach((item, index) => {
			let iconPath = '../../static/stationAddress.png';
			let id = index;
			item = {
				...item,
				id,
				iconPath
			};
		});
		let testStr = encodeURIComponent(JSON.stringify(stationMarkersData));
		let timeStamp = new Date().getTime();
		Mapview.webUrl.value = `/static/html/gMap.html?lng=${lng}&&lat=${lat}&&stationData=${testStr}&&${timeStamp}`;
	}
</script>